<template>
    <div :class="['btn',disabled?'':'active']" @click="onClick">
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: "btn",
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        onClick() {
            if (!this.disabled) {
                this.$emit("click");
            }
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="scss">
.btn {
    color: #5e868e;
    border: 1px solid #2e2c3c;
    height: 44px;
    text-align: center;
    line-height: 42px;
    border-radius: 5px;

    &.active {
        background: #56baca;
        color: #fff;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>
